<template>
  <v-layout type="main">
    <!-- <div class="alike-lis-header">
      <div class="lis-header-left">
        <div class="search-box">
          <el-input prefix-icon="el-icon-search" v-model="Pagedata.name" class="search" placeholder="" @input="getData" />
        </div>
      </div>
    </div> -->

    <el-table :data="tableData">
      <el-table-column prop="id" label="ID" />
      <el-table-column prop="name" label="名称" />

      <el-table-column prop="create_time" label="创建时间" />

      <el-table-column label="操作">
        <template slot-scope="{ row }">
          <el-button type="text" @click="setting(row)">设置</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="设置角色路由权限" :visible.sync="showSet">
      <div class="set-role-content">
        <el-transfer v-model="ownedRoleData" :data="unownedRoleData" @change="saveRole" :titles="['未拥有', '已拥有']"
          :button-texts="['删除', '添加']"></el-transfer>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="showSet = false">确定</el-button>
        <el-button class="none-type" @click="showSet = false">关 闭</el-button>
      </span>
    </el-dialog>
  </v-layout>
</template>

<script>
import { getAllRole, getuserRoleMenuAll, getuserRoleMenuById, addUserRole, removeUserRole } from '@/api/routeAuth'


export default {
  data() {
    return {
      tableData: [],
      ownedRoleData: [],
      unownedRoleData: [],
      editForm: {},
      showSet: false,
      Pagedata: {
        current: 1,
        size: 10,
        total: 0,
      },
    };
  },
  async created() {
    this.getData()
  },
  methods: {
    async getData() {
      let res = await getAllRole()
      this.tableData = res.data
    },
    async getRoles(data) {
      const allRes = await getuserRoleMenuAll()
      const res = await getuserRoleMenuById(data.id)

      // 已拥有的路由数组ID
      this.ownedRoleData = res.data.filter(item => item.selected).map(rule => rule.id)
      // 所有的路由数组
      this.unownedRoleData = allRes.data.map(item => ({ key: item.id, label: item.name }))
    },
    async setting(data) {
      this.editForm = data;
      this.showSet = true;

      this.getRoles(data);
    },
    async saveRole(e) {
      console.log(e);

      // 查询已拥有菜单列表
      const res = await getuserRoleMenuById(this.editForm.id);
      const owned = res.data.filter(item => item.selected).map(data => data.id);

      e.map(async item => {
        if (!owned.includes(item)) {
          // 当前选项不在已拥有菜单中，新增
          console.log("新增: ", item);
          await addUserRole({
            menu_id: item,
            role_id: this.editForm.id
          })

          this.getRoles(this.editForm);
        }
      });

      owned.map(async item => {
        if (!e.includes(item)) {
          // 已拥有的菜单不在已选择的菜单中，删除
          console.log("删除: ", item);
          await removeUserRole({
            menu_id: item,
            role_id: this.editForm.id
          })

          this.getRoles(this.editForm);
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.set-role-content {
  display: flex;
  justify-content: center;
}
</style>